<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>通用性配置工具系统</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<link
	href="${ctx }/js/plugins/bootstrap-fileinput/css/fileinput.min.css"
	rel="stylesheet">
<link
	href="${ctx }/js/plugins/bootstrap-fileinput/css/fileinput-rtl.min.css"
	rel="stylesheet">
<style>
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover {
	background-color: rgba(0, 0, 0, 0);
}

#wrapper {
	overflow: hidden
}

.btn-default {
	margin: 0;
	height: 100%;
	width: 100%;
	background: none;
	color: #fff
}

.fa-backward {
	margin-top: 50%;
}

.fileinput-upload-button {
	height: 34px
}
</style>
</head>

<body class="fixed-sidebar full-height-layout gray-bg"
	style="overflow:hidden">


	<!-- 修改头像模态框 -->
	<div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog"
		aria-hidden="true">

		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改头像</h4>
				</div>
				<div class="modal-body" style="height: 450px;">
					<div class="form-group" class="row">
						<label class="col-sm-3 control-label"></label>
						<div class="col-sm-4" style="width: 300px;">
							<input id="image_file" name="image_file" dir=rtl
								class="file-loading" type="file"> <span
								class="upload-prompt" style="color: red;">支持jpg、png、jpeg格式，大小不超过2.0M</span>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<!-- <button id="update_head_img" type="button" class="btn btn-primary">保存更改</button> -->
					<button id="close_modal" type="button" class="btn btn-primary">关闭</button>
				</div>
			</div>
		</div>
	</div>


	<div id="wrapper">
		<!--左侧导航开始-->
		<nav class="navbar-default navbar-static-side" role="navigation">
		<div class="nav-close">
			<i class="fa fa-times-circle"></i>
		</div>
		<div class="sidebar-collapse">
			<ul class="nav" id="side-menu">
				<li class="nav-header">
					<div class="dropdown profile-element">
						<span> <c:choose>
								<c:when test="${not empty sessionScope.userSession.img }">
									<img alt="image" class="img-circle"
										src="${sessionScope.userSession.img }" />
								</c:when>
								<c:otherwise>
									<img id="user_head_img" alt="image" class="img-circle"
										src="${ctx}/${sessionScope.LVDS_CURRENT_USER_OBJECT.head_img}"
										style="widht:64px;height:64px;" />
								</c:otherwise>
							</c:choose> </span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<span class="clear"> <span class="block m-t-xs"><strong
									class="font-bold">${sessionScope.LVDS_CURRENT_USER_OBJECT.userName
										}</strong> </span> <span class="text-muted text-xs block">${sessionScope.LVDS_CURRENT_USER_OBJECT.description
									}<b class="caret"></b> </span> </span> </a>
						<ul class="dropdown-menu animated fadeInRight m-t-xs">
							<li><a class="J_menuItem" id="openHead">修改头像</a>
							</li>
							<li><a class="J_menuItem" id="editPwd">修改密码</a>
							</li>
							<li class="divider"></li>
							<li><a href="#" onClick="logout();">安全退出</a></li>
						</ul>
					</div></li>
			</ul>
		</div>
		</nav>
		<!--左侧导航结束-->
		<!--右侧部分开始-->
		<div id="page-wrapper" class="gray-bg dashbard-1">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0;color:#fff;font-size:16px;line-height:60px;height:60px;">通用配置工具系统
				<div class="navbar-header"></div>
				<a href="#" style="float:right;color:#fff;display:inline-block;margin-right:20px;background:url('images/closebtn.png') no-repeat left center;padding-left:30px;" onClick="logout();">退出</a>
				</nav>
			</div>
			<div class="row content-tabs">
				<div class="roll-nav roll-left J_tabLeft">
					<nav role="navigation" style="margin-bottom: 0"> <a
						class="navbar-minimalize minimalize-styl-2 btn-default " href="#"><i
						class="fa fa-backward"></i> </a> </nav>
				</div>
				<nav class="page-tabs J_menuTabs">
				<div class="page-tabs-content">
					<a href="javascript:;" class="active J_menuTab"
						data-id="${ctx}/welcome">首页</a>
				</div>
				</nav>
				<button class="roll-nav roll-right J_tabRight">
					<i class="fa fa-forward"></i>
				</button>
				<!-- <div class="btn-group roll-nav roll-right">
					<button class="dropdown J_tabClose" data-toggle="dropdown">
						关闭操作<span class="caret"></span>

					</button>
					<ul role="menu" class="dropdown-menu dropdown-menu-right">
						<li class="J_tabShowActive"><a>定位当前选项卡</a>
						</li>
						<li class="divider"></li>
						<li class="J_tabCloseAll"><a>关闭全部选项卡</a>
						</li>
						<li class="J_tabCloseOther"><a>关闭其他选项卡</a>
						</li>
					</ul>
				</div> -->
				<!-- <a href="#" onClick="logout();"
					class="roll-nav roll-right J_tabExit"><i
					class="fa fa fa-sign-out"></i> 退出</a> -->
			</div>
			<div class="row J_mainContent" id="content-main">
				<iframe class="J_iframe" name="iframe0" width="100%" height="100%"
					src="${ctx}/welcome" frameborder="0" data-id="${ctx}/welcome"></iframe>
			</div>
			<!-- 关闭底部栏目
			<div class="footer">
				<div class="pull-right">
					&copy; 2014-2015 <a href="http://www.zi-han.net/" target="_blank">zihan's
						blog</a>
				</div>
			</div>
			 -->
		</div>
		<!--右侧部分结束-->
		<!--右侧边栏开始-->

	</div>
	<!-- 修改用户密码模态窗口 -->
	<div class="modal inmodal" id="editUserPassWordWin" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close closeWin" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">修改密码</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="editUserPassWordform" name="editUserPassWordform" method="post">
						<input id="userId" name="userId" type="hidden" value="${sessionScope.LVDS_CURRENT_USER_OBJECT.id}">
						<div class="form-group">
							<label class="col-sm-3 control-label">用户账户：</label>
							<div class="col-sm-8">
								<input id="userName" name="userName" class="form-control"
									readonly="readonly" aria-required="true" type="text"
									value="${sessionScope.LVDS_CURRENT_USER_OBJECT.userName}">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">原密码：</label>
							<div class="col-sm-8">
								<input id="oldpassword" name="oldpassword" class="form-control"
									required="" aria-required="true" type="password"
									placeholder="请输入原密码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">新密码：</label>
							<div class="col-sm-8">
								<input id="newpassword" name="newpassword" class="form-control"
									required="" aria-required="true" type="password"
									placeholder="请输入新密码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">确认密码：</label>
							<div class="col-sm-8">
								<input id="checkPassword" name="checkPassword"
									class="form-control" required="" aria-required="true"
									type="password" placeholder="请再次输入新密码">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-5">
								<button type="button" class="btn btn-white closeWin"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary"
									>保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="${ctx }/js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="${ctx }/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>

	<!-- 添加左侧菜单，必须在引入contabs.js文件之前执行 -->
	<script type="text/javascript">
		$(function() {
			$.ajax({
				async : false, //请勿改成异步，下面有些程序依赖此请数据
				type : "POST",
				url : '${ctx}/security/resources/getMenuHtml',
				success : function(json) {
					var ul = $("#side-menu");
					ul.append(json.substring(1, json.length - 1));
				}
			});

		});
		function logout() {
			layer.confirm('您确定退出本系统吗？', {
				icon : 3,
				title : '提示'
			}, function() {
				//在这里写删除的ajax请求！！！！
				location.href = "${ctx}/j_spring_security_logout";
			}, function() {
				var index = layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				layer.close(index); //再执行关闭   	
			});
		}

		//弹出修改头像框
		$("#openHead").click(function() {
			initFileInput("image_file", "${ctx}/security/user/editHeadImg");
			$("#myModal").modal("show");
		});
		//关闭
		$("#close_modal").click(function() {
			$("#myModal").modal("hide");
		});
		//编辑密码
		$("#editPwd").click(function() {
			$('#editUserPassWordWin').modal('show');
		});
		$("#oldpassword").blur(function(){
		  var v_user_id=$("#userId").val();
		  var v_oldpassword=$("#oldpassword").val();
		   $.ajax({
				type : "post",
				url : "${ctx}/security/user/checkPaswd",
				data : {"user_id":v_user_id,"oldpassword":v_oldpassword},
				success : function(data) {
					if (data.errcode == 1) {
					$('#oldpassword').next().remove();
				    var spa='<span class="help-block m-b-none" style="color: red;">原密码有误，请重新输入！</span>';
				    $('#oldpassword').after(spa);
				     $("#oldpassword").focus();
				      return false;
				  }else{
				    $('#oldpassword').next().remove();
				  }
				},
				error : function() {
					layer.alert('请刷新页面重新修改密码！', {
						icon : 2
					});
				}
			});
		});
		
		$('#newpassword').blur(function(){
			var reg=/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,20}$/;
		    var v_newpassword=$('#newpassword').val();
		    $('#newpassword').next().remove();
			if(v_newpassword.match(reg) == null){
				var spa='<span class="help-block m-b-none" style="color: red;">密码必须包含英文大写、小写和数字，长度为8-20位</span>';
				$('#newpassword').after(spa);
				$('#newpassword').focus();
				return false;
			}else if(v_newpassword.length<8){
				var spa='<span class="help-block m-b-none" style="color: red;">密码不能小于8位</span>';
				$('#newpassword').after(spa);
				$('#newpassword').focus();
				return false;
			}
			
		});
		$('#checkPassword').blur(function(){
		   $('#checkPassword').next().remove();
			 var v_checkPassword=$('#checkPassword').val();
			 var v_newpassword=$('#newpassword').val();
			if(v_newpassword!=v_checkPassword){
			    var spa='<span class="help-block m-b-none" style="color: red;">二次密码密码输入不一致，请核查！</span>';
				$('#checkPassword').after(spa);
				$('#checkPassword').focus();
				return false;
			}
		});
		$('#editUserPassWordform').submit(function() {
		 var v_newpassword=$('#newpassword').val();
		    var v_checkPassword=$('#checkPassword').val();
			$('#checkPassword').next().remove();
			if(v_newpassword!=v_checkPassword){
			    var spa='<span class="help-block m-b-none" style="color: red;">二次密码密码输入不一致，请核查！</span>';
				$('#checkPassword').after(spa);
				$('#checkPassword').focus();
				return false;
			}
			  $.ajax({
				type : "post",
				url : "${ctx}/security/user/resetPwd",
				data : $('#editUserPassWordform').serialize(),
				success : function(data) {
					if (data.errcode == 1) {
					 layer.alert(data.errmsg, {
						icon : 2
					});
				  }else{
				   layer.alert(data.errmsg, {
							icon : 1
						}, function(index) {
							$('#editUserPassWordWin').modal('hide');
							layer.close(index);
							$('#oldpassword').val("");
							$('#newpassword').val("");
							$('#checkPassword').val("");
						});
				  }
				},
				error : function() {
					layer.alert('请刷新页面重新修改密码！', {
						icon : 2
					});
				}
			});
			
		});
		//初始化上传文件
		function initFileInput(ctrlName, uploadUrl) {
			var control = $('#' + ctrlName);
			control
					.fileinput(
							{
								language : "zh", //设置语言  
								theme : "fa",
								uploadUrl : uploadUrl, //上传地址  
								uploadAsync : true, //是否异步上传   默认异步上传
								showUpload : true, //是否显示上传按钮  
								showRemove : false, //是否显示移除按钮
								showPreview : true, //是否显示预览
								showCaption : true,//是否显示文件标题。默认为true。
								allowedFileExtensions : [ 'jpg', 'png', 'jpeg' ],//接收的文件后缀
								browseClass : "btn btn-primary", //按钮样式
								initialPreview : [ //预览图片的设置
										"<img src='${ctx}/${sessionScope.LVDS_CURRENT_USER_OBJECT.head_img}' widht='100px;' height='100px;' class='file-preview-image' alt='当前图片' title='当前图片'>", ],
								//browseClass:"btn btn-primary", //按钮样式
								dropZoneEnabled : false,//是否显示拖拽区域
								showClose : false, //是否在预览中显示关闭图标
								maxFileSize : 2048, //单位为kb，如果为0表示不限制文件大小
								showUploadedThumbs : false,// 是否在预览窗口中持续显示上传的文件缩略图（用于ajax上传）
								//showBrowse: true, //是否显示文件浏览按钮
								layoutTemplates : {
									actionDelete : "",//去除缩略图上面的删除按钮
									actionUpload : "",//去除缩略图上面的上传按钮
									actionZoom : "",//去除缩略图上面的查看详情按钮
								},
							}).on("fileuploaded", function(event, data) {
						if (data.response) {
							layer.alert("修改成功!");
							location.reload();
						} else {
							layer.alert("修改失败,请重试!");
						}
					});
			//自动上传
			/*  .on("filebatchselected", function(event, files) {
			      $(this).fileinput("upload");
			       layer.alert("修改成功!"); 
			       //location.reload();	
			  }) */
			  
			  
		}
		
		function finSideMenu(){
			var taps=$("#content-main");
			return taps;
		}
	</script>

	<!-- 自定义js -->
	<script src="${ctx }/js/hplus.js?v=4.1.0"></script>
	<script type="text/javascript" src="${ctx }/js/contabs.js"></script>
	<!-- 第三方插件 -->
	<script src="${ctx }/js/plugins/pace/pace.min.js"></script>
	<script
		src="${ctx }/js/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script src="${ctx }/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
</body>
</html>